<template>
  <div class="market-box">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :loading-text="loadingword"
      :immediate-check="false"
      @load="onLoad"
      :offset="50"
    >
      <div class="skeleton-style-conver" v-if="loadings">
        <div class="skeleton-style2-conver">
          <van-skeleton :row="6" :loading="loadings"></van-skeleton>
        </div>
      </div>

      <div class="classi-fication-button" @click="openClassification()">发布</div>
      <div class="classi-fication-bg" v-if="showClassification" @click="closeClassfication()">
        <div class="classi-fication-list">
          <ul>
            <li
              v-for="(list, index) in classTableData"
              :key="index"
              :class="{'activeClass': tabClass === list.value}"
              @click="classiListEvent($event, list.value)"
            >{{list.name}}</li>
          </ul>
        </div>
      </div>
      <div class="market-headers">
        <div class="area_list clear">
          <div class="menu-left float-left">
            <span>当前节点：</span>
          </div>
          <div class="menu-right">
            <van-dropdown-menu>
              <van-dropdown-item
                v-model="areaValue"
                :options="areaOption"
                @change="changeOption(areaValue)"
              />
            </van-dropdown-menu>
          </div>
        </div>
        <!--table分类-->
        <div class="market-classifle">
          <ul class="clear">
            <li
              class="float-left"
              v-for="(list, index) in classTableData"
              :key="index"
              :class="{'activeClass': tabClass === list.value}"
              @click="classTableEvent(list.value, list.name)"
            >{{list.name}}</li>
          </ul>
        </div>
      </div>

      <div class="market-transaction-list" v-if="!loadings">
        <div class="market-transaction-box" v-for="(list, index) in themeListata" :key="index">
          <div class="market-transaction-img" v-if="list.imageList">
            <img
              v-if="list.imageList"
              :src="address + list.imageList[0].iamge"
              alt
              @click="priveimg(address + list.imageList[0].iamge)"
            >
          </div>
          <div class="market-transaction-title" @click="toDetail(list.theme_id)">
            <p>{{list.theme_title}}</p>
            <!-- <div class="market-transaction-contact">联系方式:{{list.contact}}</div> -->
            <div class="market-transaction-address">地址: {{list.trade_address}}</div>
            <!-- <div class="market-transaction-address">预期价值:{{list.trade_price || 0}}元</div> -->
            <div class="market-transaction-status">
              <div>状态: {{list.theme_status === '1' ? "进行中" : "已关闭"}}</div>
              <div>类型: {{list.trade_type}}</div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
    <v-footer></v-footer>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import {
  Popup,
  Icon,
  Notify,
  Tab,
  Tabs,
  List,
  DropdownMenu,
  DropdownItem,
  ImagePreview,
  Skeleton
} from "vant";
import { areaCodeList, selectThemeList, selectWein } from "../../api/api.js";
import footer from "../footer/footer.vue";
export default {
  components: {
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    [Notify.name]: Notify,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    "v-footer": footer,
    [ImagePreview.name]: ImagePreview,
    [Skeleton.name]: Skeleton
  },
  data() {
    return {
      orderTitle: "", // 订单标题
      orderContent: "", //订单详细内容
      orderPerson: "", // 联系人
      orderPhone: "", // 联系电话
      orderSchool: "", //学校
      areaCodeNum: 1, //区域号
      areaList: [], // 区域数据
      selectValue: {},
      showClassification: false,
      tabClass: 1,
      classTableData: [
        { name: "书籍类", value: 1 },
        { name: "生活类", value: 2 },
        { name: "特产类", value: 3 },
        { name: "其他", value: 4 }
      ],
      themeListata: [],
      contentHeight: "",
      loading: false,
      finished: false,
      startPage: 0,
      loadingword: "加载中...",
      themeType: 1,
      allPageNum: 0,
      areaOption: [],
      areaValue: 1,
      address: staturl.staturl,
      loadings: true
    };
  },
  computed: {
    ...mapState(["areaCode", "creator"])
  },
  created() {
    // 存储openid
    this.storageCreate(this.GetUrlByParamName("id"));
    if (this.areaCode) {
      this.areaCodeNum = this.areaCode.area_Code;
    }

    if (this.creator) {
      this.creator_Id = this.creator;
    }
    // 获取列表
    this.themeList();
    // 获取区域号
    this.areaCodeList();
  },
  methods: {
    ...mapMutations(["storageCode", "storageCreateId"]),
    // 进入首页之后，先获取区域号，
    areaCodeList() {
      this.areaOption = [];
      areaCodeList().then(res => {
        if (res.data.checkCode === "PRO-920") {
          this.areaList = res.data.result.data;
          let area = res.data.result.data;
          area.forEach((el, index) => {
            let opt = {
              text: el.school_Name,
              value: el.area_Code
            };
            this.areaOption.push(opt);
          });
          this.areaOption.forEach(res => {
            if (res.value === this.areaCodeNum) {
              this.areaValue = res.value;
            }
          });
        }
      });
    },
    priveimg(srcs) {
      ImagePreview([srcs]);
    },

    changeOption(areaValue) {
      this.areaList.forEach(el => {
        if (el.area_Code === areaValue) {
          this.storageCode(el);
        }
      });
      if (areaValue) {
        this.areaCodeNum = this.areaCode.area_Code;
      }
      // 选择完区域号之后，更新列表
      this.initiaLization();
    },

    // 选择table
    classTableEvent(event, name) {
      this.themeType = this.tabClass = event;
      this.initiaLization();
    },

    // 每次切换初始化
    initiaLization() {
      this.loading = true;
      this.finished = false;
      this.startPage = 0;
      this.themeListata = [];
      this.themeList();
    },

    // 点击发布按钮，弹出分类框
    openClassification() {
      this.showClassification = !this.showClassification;
    },
    closeClassfication() {
      this.showClassification = false;
    },
    classiListEvent(e, value) {
      e.stopPropagation(); //阻止冒泡
      this.$router.push({
        path: "/createlist",
        query: {
          type: value
        }
      });
    },

    // 存储openid
    storageCreate(oid) {
      this.storageCreateId(oid);
    },

    // 查询主题列表
    themeList() {
      let paramObj = {
        category: this.themeType, // 采用数字传递，以此类推
        startPage: this.startPage,
        pageNumData: 8,
        area_Code: this.areaCodeNum,
        isSelf: false
      };
      selectThemeList(paramObj).then(res => {
        this.loading = false;
        this.loadings = false;
        if (res.data.checkCode) {
          let list = res.data.result.result;
          let listArr = [];
          list.forEach((res, index) => {
            if (res.imageList.length > 0) {
              listArr.push(res);
            }
          });
          this.themeListata = this.themeListata.concat(listArr);
          this.allPageNum = res.data.result.paginationMess;
        }
      });
    },
    onLoad() {
      this.loading = true;
      setTimeout(() => {
        this.startPage++;
        this.finished = false;
        this.themeList();
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.startPage + 2 > Math.ceil(this.allPageNum.allCount / 8)) {
          this.finished = true;
        }
      }, 1000);
    },

    // 跳转至主题详情
    toDetail(themeId) {
      this.$router.push({
        path: "/themedetail",
        query: {
          themeId
        }
      });
    },
    GetUrlByParamName(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var URL = decodeURI(window.location.search);
      var r = URL.substr(1).match(reg);
      if (r != null) {
        //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
        return decodeURI(r[2]);
      }
      return null;
    }
  }
};
</script>
<style lang="less" scoped>
.market-box {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.market-headers {
  width: 100%;
  position: fixed;
  top: 0rem;
  left: 0rem;
  background: #ffffff;
  border-bottom: 1px solid #d2c8c8;
}
.classi-fication-button {
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 0.3rem;
  position: fixed;
  bottom: 4rem;
  right: 0.5rem;
  border-radius: 50%;
  border: 1px solid #a28a8a;
}
.classi-fication-bg {
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(255, 255, 255, 0.8);
}
.classi-fication-list {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #a28a8a;
  position: fixed;
  bottom: 5rem;
  right: 1.5rem;
  border-radius: 0.12rem;
  font-size: 0.3rem;
  ul {
    display: flex;
    li {
      flex: 1;
      text-align: center;
      line-height: 0.8rem;
      border-left: 1px solid #a28a8a;
    }
    li:nth-child(1) {
      border-left: none;
    }
  }
}

.area_list {
  font-size: 0.3rem;
  margin-bottom: 0.2rem;
  padding: 0.5rem 0.2rem 0.2rem 0.2rem;
  .menu-left {
    height: 0.6rem;
    line-height: 0.6rem;
    margin-right: 0.2rem;
  }
  .menu-right {
    height: 0.6rem;
  }
}
.market-classifle {
  width: 100%;
  margin-top: 0.12rem;
  font-size: 0.35rem;
  ul {
    li {
      width: 25%;
      height: 0.8rem;
      line-height: 0.8rem;
      border: none;
      text-align: center;
    }
  }
}
.activeClass {
  background: #f5f5f5;
  border-radius: 0.12rem;
}
.market-transaction-box {
  display: flex;
  font-size: 0.28rem;
  text-align: center;
  padding: 0.3rem 0.2rem;
  .market-transaction-buy {
    flex: 1;
    line-height: 1rem;
    // border-radius: 0rem;
  }
  .market-transaction-sell {
    flex: 1;
    line-height: 1rem;
    // border-radius: 0rem;
  }
}
.market-transaction-list {
  margin-top: 0.9rem;
  overflow: scroll;
  .market-transaction-box {
    display: flex;
    margin-top: 0.5rem;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(207, 216, 221, 0.2),
      0 4px 6px rgba(207, 216, 221, 0.2);
    &:nth-child(1) {
      margin-top: 0.2rem;
    }
    .market-transaction-img {
      flex: 0.5;
      height: 2rem;
      // overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.12rem;
      }
    }
    .market-transaction-title {
      padding-left: 0.3rem;
      text-align: left;
      flex: 1;
      p {
        margin: 0px;
        padding: 0px;
        font-size: 0.4rem;
        font-weight: bold;
        width: 6rem;
        white-space: nowrap;
        overflow: hidden;
        // white-space: nowrap;
        text-overflow: ellipsis;
      }
      .market-transaction-contact {
      }
      .market-transaction-address {
        font-size: 0.3rem;
        margin-top: 0.2rem;
        width: 6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .market-transaction-status {
        font-size: 0.3rem;
        margin-top: 0.2rem;
        display: flex;
        div {
          flex: 1;
        }
      }
    }
  }
}
</style>


